<template>
  <div class="app">
    <el-container>
      <el-header class="layout-index-header">
        <div style=" border-bottom: solid 3px #003E7D;background-color:#E7E8EB;">
            <el-menu :default-active="activeIndex"
                     router
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     background-color="#E7E8EB"
                     text-color="#000"
                     active-text-color="#000"
            >

              <el-menu-item index="/sys-index/index"><h1>考试报名网</h1></el-menu-item>
              <el-menu-item index="/sys-index/temp/apply">在线报名</el-menu-item>
              <el-menu-item index="/sys-index/temp/info">考试信息</el-menu-item>
              <el-menu-item index="/sys-index/temp/check">成绩查询</el-menu-item>
              <el-menu-item index="/sys-index/temp/feedback">反馈信息</el-menu-item>
              <el-menu-item index="/sys-admin/index">后台管理</el-menu-item>

              <div style="float: right" >
                欢迎光临{{username}}
                <br>
                退出登录
              </div>
            </el-menu>

        </div>


      </el-header>
      <el-main class="layout-index-main" >
        <div style="width: 1200px;margin: 0 auto">
          <!-- 根据路由，由其它视图组件来显示 -->
          <router-view/>
        </div>
      </el-main>
      <el-footer class="layout-index-footer">
        <div class="layout-index-footer-body">
          <p>Author：xiangyu 武汉东湖学院 计算机科学与技术四班 毕业设计 </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style>
.app{
    background-color: #fff  !important ;
}
.layout-index-header{
  width: 1200px; margin: 0 auto ;padding: 0 !important;
}
.layout-index-header h1 {
  color: #003E7D;

}
.layout-index-main{
  margin: 0 auto ;
  position: absolute;left: 17px ;right: 0px;top: 70px;bottom: 60px;
}
.el-card__body, .el-main{
  padding: 0 !important;
}
.layout-index-footer{
  width: 1200px;
  height: 80px;
  background-color: rgb(244,244,244);
  margin: 0 auto ;
  position: absolute;left: 0px ;right: 0px;bottom: 0px;
}

.layout-index-footer-body{
  width: 100%;text-align: center;
}
</style>
<script>
export default {
  username:'123',
  data: {

    activeIndex: '1',
    activeIndex2: '1',
    input: ''
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loadUsername() {
      this.username= localStorage.getItem('username');
      console.log(this.username)
    }
  },
  mounted() {
    this.loadUsername();
    console.log(this.username)
  }

}
</script>
